<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="$t('Page.user.wdqb')">
			</cu-custom>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="pageName"> </pc-nav-bar>
			<uni-forms ref="bindBankRef" :rules="bindBankRules" :modelValue="bankInfo" validateTrigger="blur"
				label-position="top">
				<uni-forms-item label-width="200px" name="phone" :label="$t('Page.user.shj')">
					<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
						v-model.trim="bankInfo.phone" :clearable="false" />
				</uni-forms-item>
				<uni-forms-item label-width="200px" name="cpf" label="CPF">
					<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
						v-model.trim="bankInfo.cpf" :clearable="false" />
				</uni-forms-item>
				<uni-forms-item label-width="200px" name="name" :label="$t('Page.user.mz')">
					<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
						v-model.trim="bankInfo.name" :clearable="false" />
				</uni-forms-item>
				<uni-forms-item label-width="200px" name="email" :label="$t('Page.user.yx')">
					<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
						v-model.trim="bankInfo.email" :clearable="false" />
				</uni-forms-item>
				<uni-forms-item label-width="200px" name="pix" label="PIX">
					<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
						v-model.trim="bankInfo.pix" :clearable="false" />
				</uni-forms-item>
				<waves class="btn confrim-btn" @onTap="confirm('bindBankRef')">
					{{ isBindBank ? $t('Page.user.qrxg') :  $t('Page.user.qrtj') }}
				</waves>
				<!-- <view class="submit-wrap">
					<waves class="depositBtn" @onTap="confirm('bindBankRef')">
						{{ isBindBank ? $t('Page.user.qrxg') :  $t('Page.user.qrtj') }}
					</waves>
				</view> -->
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce,
		showToast,
		checkEmail
	} from '@/utils/common.js'
	import {
		validarCPF
	} from '@/utils/function/reg.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				styles: {
					borderColor: '#2e363f',
					color: '#fff',
					backgroundColor: 'rgba(204,181,155,0.2)'
				},
				pageName: this.$t('Page.mineWallet.addwlin'),
				bindBankRules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.srsjh')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value.length < 10 || value.length > 13) {
										callback(this.$t('Page.user.sjgsbd'))
									}
									return true
								}
							}
						]
					},
					cpf: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.srcpf')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									// if (!validarCPF(value)) {
									// 	callback(this.$t('Page.user.cpfbd'))
									// }
									if (value.length < 10) {
										callback(this.$t('Page.user.cpfbd'))
									}
									return true
								}
							}
						]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.srmz')
						}]
					},
					email: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.sryx')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (!checkEmail(value)) {
										callback(this.$t('Page.user.yxbd'))
									}
									return true
								}
							}
						]
					},
					pix: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.srpix')
						}]
					}
				},
				bankInfo: {
					phone: '',
					cpf: '',
					name: '',
					email: '',
					pix: ''
				},
				isBindBank: false,
				isBack: false
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				userInfo: state => state.app.userInfo
			}),
		},
		onLoad(option) {
			this.isBindBank = this.userInfo.bank instanceof Object
			this.pageName = this.isBindBank ? this.$t('Page.mineWallet.edwiin') : this.$t('Page.mineWallet.addwlin');
			if (option.isBack) {
				this.isBack = true
			}
		},
		created() {
			this.getWalletInfo()
		},
		methods: {
			...mapActions('app', ['getUserInfo']),
			getWalletInfo() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.isBindBank = data.userinfo.bank instanceof Object
						if (this.isBindBank) {
							this.bankInfo = data.userinfo.bank
							this.pageName = this.$t('Page.mineWallet.edwiin')
							delete this.bankInfo.status_text
						}
					}
				})
			},
			// 使用 Debounce 修饰符，实现防抖效果
			submit: Debounce(function() {
				const {
					ADDBANK
				} = this.$api
				sendMessage({
					flag: ADDBANK,
					content: this.bankInfo
				})
				uni.$once(ADDBANK, (res) => {
					const {
						code,
						data,
						msg
					} = res
					showToast(msg)
					if (code === 1) {
						this.getWalletInfo();
						this.getUserInfo();
						if (this.isBack) {
							setTimeout(() => {
								uni.navigateBack();
							}, 500)
						}
					}
				})
			}, 500),
			confirm(ref) {
				this.$refs[ref].validate().then(res => {
					this.submit()
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="less" scoped>
	.btn {
		background: var(--bg-13);
		box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
		color: var(--color-28);
		border-radius: 100px;
		cursor: pointer;
	}

	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height)) !important;
			overflow-y: auto;
			padding: 10px 15px 15px;
			box-sizing: border-box;

			.uni-forms {
				width: 100%;

				.uni-forms-item {
					padding: 15px 15px 8px;
					margin-bottom: 0px !important;
					box-sizing: border-box;

					.uni-easyinput {
						height: 40px;

						/deep/.uni-easyinput__content {
							height: 40px;
							border-radius: 5px;
							border: initial;
							box-sizing: border-box;
						}

					}
				}

				/deep/.uni-forms-item__label {
					color: #ffffff;
					font-weight: bold;
					font-size: 13px;
				}

				.confrim-btn {
					width: calc(100% - 30px);
					margin: 40px auto 0;
					height: 45px;
					line-height: 45px;
					text-align: center;
					font-size: 18px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
				}
			}
		}
	}

	@media screen and (min-width:768px) {
		.page-wrap {
			padding-top: 70px;

			.content {
				width: 100%;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 10px 30px 30px;
				box-sizing: border-box;

				.uni-forms {
					width: 100%;
					margin-top: 30px;

					.uni-forms-item {
						padding: 15px;
						box-sizing: border-box;

						.uni-easyinput {
							height: 50px;

							/deep/.uni-easyinput__content {
								height: 50px;
								border-radius: 5px;
								border: initial;
								box-sizing: border-box;
							}
						}
					}

					/deep/.uni-forms-item__label {
						color: #ffffff;
						font-weight: bold;
						font-size: 13px;
					}

					.confrim-btn {
						max-width: 315px;
						height: 50px;
						line-height: 50px;
						margin-top: 30px;
						margin: 10px auto 0;
					}
				}

			}
		}
	}
</style>